<template>
  <div class="time clearfix">
    <div class="center">
      <div class="top">
        <div class="title">
          <span></span>
          <span>限时抢购</span>
          <span></span>
        </div>
        <div>
          我不管这个世上的人怎么说我，我只想依照我的信念做事，绝不后悔，不管现在将来都一样。
        </div>
      </div>
      <div class="bottom clearfix">
        <ul>
          <!-- v-for="(p, index) of products" :key="index" -->
          <!-- :to="`/about/${p.pid}`" -->
          <!-- :src="p.pic" -->
          <!--  -->
          <!--  -->
          <!--  -->
          <li>
            <!-- <router-link to="/">
              <div class="pic">
                <img src="/img/product/daily1.webp" alt="" />
              </div>
              <div class="title">
                sjkfaslfjlsajflasjflkasjflskajflakjfslkjflask
              </div>
              <p class="price"><span>￥fdsafsdaf</span>￥fsafadf</p>
            </router-link> -->
            <div class="box">
              <div class="ms">今晚 20:00</div>
              <img src="/img/index/ms.png" />
              <div class="desc">距离结束还有</div>
              <div class="countdown clearfix">
                <span></span>
                <i>:</i>
                <span></span>
                <i>:</i>
                <span></span>
              </div>
            </div>
          </li>

          <li v-for="(p, i) of products" :key="i">
            <router-link :to="`/about/${p.pid}`">
              <div class="pic">
                <img :src="p.pic" alt="" />
              </div>
              <div class="title">
                {{ p.pname }}
              </div>
              <p class="price">
                <span>￥{{ p.oldprice }}</span
                >￥{{ p.price }}
              </p>
            </router-link>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>



<script>
export default {
  data() {
    return {
      products: [],
    };
  },
  methods: {
    timeBack() {
      var spans = document.querySelectorAll(".countdown span");
      // console.log(spans);
      // 倒计时计算
      var inputTime = new Date();
      // console.log(+new Date);
      // 将时间设置为每天的晚上八点
      inputTime.setHours(20);
      inputTime.setMinutes(0);
      inputTime.setSeconds(0);

      function countdown() {
        // 获取当前的时间毫秒数
        var newDate = +new Date();
        if (newDate > inputTime) {
          h = "0:0";
          m = "0:0";
          s = "0:0";
          spans[0].innerHTML = h;
          spans[1].innerHTML = m;
          spans[2].innerHTML = s;
        } else {
          var times = (inputTime - newDate) / 1000;
          var h = parseInt((times / 60 / 60) % 24);
          h = h < 10 ? "0" + h : h;
          var m = parseInt((times / 60) % 60);
          m = m < 10 ? "0" + m : m;
          var s = parseInt(times % 60);
          s = s < 10 ? "0" + s : s;
          // console.log(h, m, s);
          spans[0].innerHTML = h;
          spans[1].innerHTML = m;
          spans[2].innerHTML = s;
          if (h == 0 && m == 0 && s == 0) {
            clearInterval(timer);
          }
        }
      }
      countdown();
      var timer = setInterval(countdown, 1000);
    },
  },
  mounted() {
    this.timeBack();
    this.axios.get("/index/ms").then((result) => {
      this.products = result.data;
      // console.log(result.data);
      // console.log(this.products);
    });
  },
};
</script>








<style >
.time {
  width: 100%;
  height: 650px;
}
.time .center {
  width: 1200px;
  margin: 0 auto;
}
.time.top {
  height: 110px;
  text-align: center;
}
.time .top .title {
  position: relative;
  height: 46px;
}
.time .top .title span {
  display: inline-block;
}
.time .top .title span:nth-child(1) {
  position: absolute;
  top: 50%;
  left: 0;
  width: 520px;
  height: 1px;
  background-color: #efefef;
}
.time .top .title span:nth-child(3) {
  position: absolute;
  top: 50%;
  right: 0;
  width: 520px;
  height: 1px;
  background-color: #efefef;
}
.time .top .title span:nth-child(2) {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, 0);
  font-size: 24px;
  color: #444;
}
.time .top div:nth-child(2) {
  text-align: center;
  font-size: 14px;
  color: #999;
}
/* 定时器样式 */
.clearfix::after {
  content: "";
  display: block;
  height: 0;
  clear: both;
}

.time .box {
  width: 287px !important;
  height: 362.5px;
  /* padding-top: 39px; */
  /* border-top: 1px solid #e53935; */

  text-align: center;

  /* margin-top: 100px; */
}
.time .bottom ul li:first-child {
  /* border: 1px solid #e53935; */
  width: 280px !important;

  /* box-shadow: 0 0 2px #f6f6f6; */
  border: 1px solid #f6f6f6;
  border-top: 1px solid #e53935;
}

.time .box .ms {
  font-size: 21px;
  color: #ef3a3d;
  padding-top: 15px;
}

.time .box img {
  margin: 20px 0;
}

.time .countdown {
  width: 168px;
  margin: 28px auto 0;
}

.time .countdown span {
  float: left;
  width: 46px;
  height: 46px;
  font-size: 24px;
  line-height: 46px;
  color: white;
  background-color: #605751;
}

.time .countdown i {
  float: left;
  width: 15px;
  height: 46px;
  font-size: 28px;
  font-style: normal;
  line-height: 46px;
  color: #605751;
}
.time .bottom ul li {
  float: left;
  width: 290px;
  /* width: 200px; */
  height: 425px;
  padding: 0 5px 10px;
  background-clip: content-box;
  /* background-color: #eee; */
  margin-top: 60px;
}
.time .bottom .pic {
  width: 290px;
  /* width: 200px; */
  height: 362.5px;
  overflow: hidden;
}
.time .bottom .pic img {
  width: 290px;
  /* width: 200px; */

  transition: all linear 0.6s;
}
.time .bottom li:nth-child(n + 2) :hover img {
  transform: scale(1.1);
}
.time .bottom .title {
  font-size: 14px;
  color: #666 !important;
  margin-top: 20px;
}
.time .bottom .price {
  font-size: 12px;
  color: #565656;
  margin-top: 10px;
}
.time .bottom .price span {
  font-size: 13px;
  color: #ccc;
  text-decoration: line-through;
}
.time .bottom li :hover .title,
.time .bottom li :hover .price,
.time .bottom li :hover .price span {
  color: #d19f4f !important;
}
</style>